<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--插值表达式里面：要写的是表达式，不能是语句，不要在表达式中写太复杂的逻辑-->
  <h2>数字表达式</h2>
  <p>{{ 1+2+3+4+5 }}</p>
  <h2>比较运算表达式</h2>
  <p>{{10 > 20}}</p>
  <h2>字符串的拼接表达式</h2>
  <p>{{'username' + 10 + 10}}</p>
  <h2>调用方法</h2>
  <p>{{ 'username'.toUpperCase() }}</p>
  <h2>三目运算符</h2>
  <p>{{ num >=10?'大数字':'小数字'}}</p>
</div>

<!--1. 引入vue.js-->
<script src="js/vue.js"></script>
<script>
  // 2. 准备视图模型VM
  var vm =new Vue({
    el: '#app',
    data:{
      num: 5
    }
  });
</script>
</body>
</html>
